<template>
	<view style="margin: 20rpx;padding: 30rpx;background-color: white;border-radius: 20rpx;">
		<u-form labelPosition="left" :model="helpInfo" :rules="rules" ref="uForm">
			<u-form-item label="帮助类型" prop="type1" borderBottom labelWidth="80px">
				<u-radio-group v-model="helpInfo.type1" placement="row">
					<u-radio v-for="(item, index) in types" :key="index" :label="item.name" :name="item.value"
						@change="radioChange">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="联 系 人" prop="name" borderBottom labelWidth="80px">
				<u--input v-model="helpInfo.name" border="none" placeholder="请输入联系人"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="phone" borderBottom labelWidth="80px">
				<u--input v-model="helpInfo.phone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label="反馈内容" prop="content" borderBottom labelWidth="80px">
				<template>
					<u--textarea v-model="helpInfo.content" placeholder="请输入内容"></u--textarea>
				</template>
			</u-form-item>
		</u-form>
		<button @click="submit">确认提交</button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		helpCenter
	} from '../../config/api.js'
	export default {
		data() {
			return {
				helpInfo: {
					type1: '',
					name: '',
					phone: ''

				},
				// 基本案列数据
				types: [{
					name: '建议',
					value: '1'
				}, {
					name: '投诉',
					value: '2'
				}],
				rules: {
					'userInfo.nickname': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			submit() {
				// 提交
				helpCenter({
					helpType: this.helpInfo.type1,
					contactPerson: this.helpInfo.name,
					contactPhone: this.helpInfo.phone,
					content: this.helpInfo.content
				}).then(res => {
					if (res.data.msg == "添加成功") {
						this.$refs.uToast.show({
							type: 'success',
							message: '已反馈给管理员'
						})
					} else {
						this.$refs.uToast.show({
							type: 'waring',
							message: '你的网络似乎出了点问题哦'
						})
					}
				})
			},
			radioChange(n) {
				console.log(n);
			}

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">

</style>